<template>
  <div class="about">

    <!-- 页面标题 -->
    <section class="page-header">
      <div class="container">
        <h2>关于我们</h2>
        <p>了解团星网的发展历程和企业文化</p>
      </div>
    </section>

    <!-- 公司简介 -->
    <section class="company-intro">
      <div class="container">
        <div class="intro-content">
          <div class="intro-text">
            <h3>公司简介</h3>
            <p>团星网成立于2010年，是一家专业的IT服务提供商。多年来，我们致力于为客户提供优质的设备维护、网站运营、网站搭建和软件下载服务。</p>
            <p>我们拥有一支高素质的专业团队，成员均具有丰富的行业经验和专业知识。凭借着专业的技术和优质的服务，我们已经为数千家企业提供了IT解决方案，赢得了广大客户的信赖和好评。</p>
          </div>
          <div class="intro-image">
            <img src="@/assets/company-building.jpg" alt="公司大楼" />
          </div>
        </div>
      </div>
    </section>

    <!-- 企业文化 -->
    <section class="company-culture">
      <div class="container">
        <h3>企业文化</h3>
        <div class="culture-values">
          <div class="value-item">
            <div class="value-icon">
              <i class="fas fa-lightbulb"></i>
            </div>
            <h4>创新</h4>
            <p>不断创新是我们发展的动力，我们致力于为客户提供最前沿的IT解决方案。</p>
          </div>
          <div class="value-item">
            <div class="value-icon">
              <i class="fas fa-handshake"></i>
            </div>
            <h4>诚信</h4>
            <p>诚信是我们的立业之本，我们坚持以诚信为本，为客户提供最可靠的服务。</p>
          </div>
          <div class="value-item">
            <div class="value-icon">
              <i class="fas fa-users"></i>
            </div>
            <h4>团队合作</h4>
            <p>团队合作是我们成功的关键，我们注重团队建设，培养团队精神。</p>
          </div>
          <div class="value-item">
            <div class="value-icon">
              <i class="fas fa-star"></i>
            </div>
            <h4>追求卓越</h4>
            <p>追求卓越是我们的目标，我们不断提升服务质量，为客户创造更大价值。</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 发展历程 -->
    <section class="development-history">
      <div class="container">
        <h3>发展历程</h3>
        <div class="timeline">
          <div class="timeline-item">
            <div class="timeline-date">2010年</div>
            <div class="timeline-content">
              <h4>公司成立</h4>
              <p>团星网正式成立，专注于为中小企业提供IT支持服务。</p>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-date">2013年</div>
            <div class="timeline-content">
              <h4>业务拓展</h4>
              <p>扩展业务范围，开始提供网站建设和运营服务。</p>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-date">2016年</div>
            <div class="timeline-content">
              <h4>软件下载站上线</h4>
              <p>推出软件下载站服务，为用户提供安全、可靠的软件下载平台。</p>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-date">2020年</div>
            <div class="timeline-content">
              <h4>技术升级</h4>
              <p>全面升级技术架构，引入云计算和大数据分析技术，提升服务能力。</p>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-date">至今</div>
            <div class="timeline-content">
              <h4>持续发展</h4>
              <p>不断拓展业务领域，提升服务质量，为客户创造更大价值。</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'AboutView'
};
</script>

<style scoped>
/* 导航栏样式（与Home.vue相同） */
.navbar {
  background-color: #333;
  color: white;
  padding: 1rem 0;
}

.container {
  width: 80%;
  margin: 0 auto;
  max-width: 1200px;
}

.logo h1 {
  margin: 0;
  font-size: 1.8rem;
}

/* 页面标题样式 */
.page-header {
  background-color: #f5f5f5;
  padding: 3rem 0;
  text-align: center;
}

.page-header h2 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: #333;
}

.page-header p {
  font-size: 1.2rem;
  color: #666;
  margin: 0;
}

/* 公司简介样式 */
.company-intro {
  padding: 4rem 0;
}

.intro-content {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}

.intro-text {
  flex: 1;
  min-width: 300px;
}

.intro-text h3 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: #333;
}

.intro-text p {
  margin-bottom: 1rem;
  line-height: 1.6;
  color: #666;
}

.intro-image {
  flex: 1;
  min-width: 300px;
}

.intro-image img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 企业文化样式 */
.company-culture {
  background-color: #f9f9f9;
  padding: 4rem 0;
}

.company-culture h3 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 3rem;
  color: #333;
}

.culture-values {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.value-item {
  width: 250px;
  text-align: center;
  padding: 2rem 1rem;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.value-icon {
  width: 60px;
  height: 60px;
  background-color: #4285f4;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.5rem;
}

.value-item h4 {
  margin-bottom: 1rem;
  color: #333;
}

.value-item p {
  color: #666;
  line-height: 1.6;
}

/* 发展历程样式 */
.development-history {
  padding: 4rem 0;
}

.development-history h3 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 3rem;
  color: #333;
}

.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: #4285f4;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
  border-radius: 3px;
}

.timeline-item {
  padding: 10px 40px;
  position: relative;
  width: 50%;
  box-sizing: border-box;
}

.timeline-item:nth-child(odd) {
  left: 0;
}

.timeline-item:nth-child(even) {
  left: 50%;
}

.timeline-date {
  font-weight: bold;
  color: #4285f4;
  margin-bottom: 0.5rem;
}

.timeline-content {
  padding: 1.5rem;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.timeline-content h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #333;
}

.timeline-content p {
  margin: 0;
  color: #666;
}

/* 为时间线添加圆点 */
.timeline-item::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: white;
  border: 4px solid #4285f4;
  border-radius: 50%;
  top: 15px;
  z-index: 1;
}

.timeline-item:nth-child(odd)::after {
  right: -13px;
}

.timeline-item:nth-child(even)::after {
  left: -13px;
}
</style>